<template>
    <div class="app-container">
        <mt-header fixed title="商城"></mt-header>
        <router-view></router-view>
        <nav class="mui-bar mui-bar-tab">
            <a class="mui-tab-item" :class="{'mui-active':currentTab==='/home'}" @click.prevent="go('/home')">
                <span class="mui-icon mui-icon-home"></span>
                <span class="mui-tab-label">首页</span>
            </a>
            <a class="mui-tab-item" :class="{'mui-active':currentTab==='/vip'}"  @click.prevent="go('/vip')">
                <span class="mui-icon mui-icon-contact"></span>
                <span class="mui-tab-label">会员</span>
            </a>
            <a class="mui-tab-item" :class="{'mui-active':currentTab==='/car'}"  @click.prevent="go('/car')">
                <span class="mui-icon icon-gouwuche"><span class="mui-badge">9</span></span>
                <span class="mui-tab-label">购物车</span>
            </a>
            <a class="mui-tab-item" :class="{'mui-active':currentTab==='/search'}"  @click.prevent="go('/search')">
                <span class="mui-icon mui-icon-search"></span>
                <span class="mui-tab-label">搜索</span>
            </a>
        </nav>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                currentTab: this.$route.path
            }
        },
        methods: {
            go(path) {
                this.currentTab = path
                this.$router.push(path)
            },
            toastTest() {
                let instance = this.$Toast({
                    message: '操作成功',
                    iconClass: 'icon icon-success',
                    duration: -1
                });
                setTimeout(() => {
                    instance.close();
                }, 2000);
            }
        }
    }
</script>

<style scoped>
    .app-container {
        padding-top: 40px;
    }
    .mui-active{
        color: #007aff !important;
    }
</style>